<template>
  <div id="historyFlow">
    <van-tabs sticky animated swipeable v-model="active">
      <van-tab v-for="(tab,index) in tabs" :key="index" :title="tab.name" :name="tab.type">
        <div class="tab-panel" :ref="tab.data">
          <van-pull-refresh v-model="isLoading" @refresh="getListData(tab.page, tab.finished, tab.data, tab.type, true, false)">
            <img
              slot="loading"
              class="loading-gif-refresh"
              src="../../assets/loading.gif"
            >
            <form>
              <van-search
                class="search-area"
                :show-action="showCancel"
                v-model="searchValue"
                placeholder="请输入搜索标题"
                @search="onSearch"
                @cancel="onCancel"
              >
            </van-search>
            </form>
            <template v-if="getDataFiled(tab.data).length <= 0">
              <div class="no-data-img">
                <img src="../../assets/meeting/no-data.png">
                <p>暂无相关数据</p>
              </div>
            </template>
          <van-list
            v-if="getDataFiled(tab.data).length > 0"
            v-model="loading"
            :finished="getDataFiled(tab.finished)"
            finished-text="没有更多了"
            @load="getListData(tab.page, tab.finished, tab.data, tab.type, false, false)"
          >
            <van-card v-for="(item,index) in getDataFiled(tab.data)" :key="`${index}list`" 
            @click="toDetail(item)">
              <div slot="thumb">
                <template v-if="item.img">
                  <img class="head-img" :src="`${$common.filePath}${item.img}`">
                </template>
                <template v-else>
                  <img class="head-img" src="../../assets/notification/cell_head.png" />
                </template>
              </div>
              <div slot="title">
                <p class="title-class van-ellipsis">{{ item.requestname }}</p>
              </div>
              <div slot="desc">
                <p class="desc-info-class van-ellipsis">创建时间：{{ item.createdate+' '}}{{item.createtime}}</p>
                <van-tag plain type="warning">{{item.typename}}</van-tag>
              </div>
            </van-card>
          </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        active: '1',
        tabs: [{
          name: "我创建的",
          page: "createPage",
          type: 1,
          data: "createList",
          finished: 'createFinished'
        },{
          name: "我审批的",
          page: "approvePage",
          type: 2,
          data: "approveList",
          finished: 'approveFinished'
        }],
        isLoading: false,
        loading: false,
        // 我创建的
        createPage: 1,
        createList: [],
        createFinished: false,
        // 我审批的
        approvePage: 1,
        approveList: [],
        approveFinished: false,
        
        searchValue:'',
        showCancel: false,    //控制‘取消’的显示隐藏
      }
    },
    activated(){
      this.$bridge.callHandler('navTitle', {title: '历史流程'})
      this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
        responseCallback('h5 done!')
      })
      this.getListData("createPage", "createFinished", "createList", 1, true, true)
      this.getListData("approvePage", "approveFinished", "approveList", 2, true, true)

    },
    methods: {
      /**
       * 获取列表数据
       * @return {[type]} [description]
       */
      getListData(page, finished, target, type, init, showToast) {
        let self = this
        if(init) {
          self[page] = 1;
          self[finished] = false;
        }
        let config = {
          method: "POST",
          url: `${self.$common.basePath}process.php`,
          data: {
            do: "processlist",
            page: self[page]++ ,
            type: type,
            user_id: self.$store.state.userId,
            title: self.searchValue
          }
        }
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        if(!self[finished] || init) {
          self.$axios(config).then(res => {
            self.loading = false
            self[target] = init?res.data.data : self[target].concat(res.data.data)
            if(self[target].length >= res.data.count) {
              self[finished] = true 
            }
            self.isLoading = false
            self.$toast.clear()
          }).catch(err => {
            console.log(err)
            self.$toast.clear()
            self.loading = false
            self[finished] = true 
          })
        }else {
          // console.log(1)
        }
      },
      getDataFiled(dataFiled) {
        return this[dataFiled]
      },
      /**
       * 搜索栏
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      onSearch (value) {
        if (value) {
          this.showCancel = true
        }
        if (this.active == '1') {
          this.getListData("createPage", "createFinished", "createList", 1, true, true)
        } else {
          this.getListData("approvePage", "approveFinished", "approveList", 2, true, true)
        }
      },
      /**
       * 取消搜索
       * @return {[type]} [description]
       */
      onCancel () {
        this.showCancel = false
        this.getListData("createPage", "createFinished", "createList", 1, true, true)
        this.getListData("approvePage", "approveFinished", "approveList", 2, true, true)
      },
      getTypename(type) {
        let typename = ""
        switch(type) {
          case '0':
            typename = '未审批'
            break;
          case '1':
            typename = '审批'
            break;
          case '2':
            typename = '拒绝'
            break;
          case '3':
            typename = '退回'
            break;
          case '4':
            typename = '等待审批'
            break;
          case '5':
            typename = '结束'
            break;
          default:
            typename = '结束'
        }
        return typename;
      },
      getTypeclass(type) {
        let typeclass = ''
        switch(type) {
          case '0':
            typeclass = 'agreen-class'
            break;
          case '1':
            typeclass = 'agreen-class'
            break;
          case '2':
            typeclass = 'defined-class'
            break;
          case '3':
            typeclass = 'defined-class'
            break;
          case '4':
            typeclass = 'agreen-class'
            break;
          case '5':
            typeclass = 'close-class'
            break;
          default:
            typeclass = 'revocation-class'
        }
        return typeclass;
      },
      /**
       * 点击进去详情页面
       * @param  {[type]} id   [description]
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      toDetail(row) {
          this.$router.push({ name:'historyFlowDetail',query:{id: row.requestid} })
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .tab-panel  {
    -webkit-overflow-scrolling: touch;
    // height: calc(100vh - 44px);
    // overflow-y: auto;
    background: #f5f5f5;
    // padding-top: 53px;
    .van-list {
      // padding-top: 12px;
      min-height: calc(100vh - 114px);
    }
  }
  p{
    margin: 0;
  }
  .head-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
  .title-class {
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .desc-info-class {
    font-size: 14px;
    color: #999999;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .desc-box-class {
    margin-top: 5px;
    height: 40px;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px;
  }
  .margin-l-13 {
    margin-left: 13px;
  }
  // 同意
  .agreen-class {
    background-color: rgba(46, 121, 255, 0.06);
    color: rgb(46, 121, 255);
  }
  // 退回
  .defined-class {
    background-color: rgba(245, 75, 3, 0.06);
    color: rgb(245, 75, 3);
  }
  // 结束
  .close-class {
    background-color: rgba(1, 191, 101, 0.06);
    color: rgb(1, 191, 101);
  }
  // 撤销
  .revocation-class {
    background-color: rgba(245, 167, 3, 0.06);
    color: rgb(245, 167, 3);
  }
  .no-data-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50% 0;
    // height: calc(100vh - 44px);
    background-color: #f5f5f5;

    img {
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>
<style type="text/css" lang="less">
  #historyFlow {
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    background-color: #f5f5f5;

    .search-area {
      margin-top: 12px;
      .van-cell {
        line-height: 25px;
      }
    }

    .van-tab span {
      font-size: 17px;
    }
    .van-tab {
      flex-basis: 20%!important;
    }
    .van-tabs__wrap {
      padding: 0 80px;
      background-color: #fff;
    }
    .van-tabs__line {
      width: 74px!important;
    }
    .van-card {
      padding: 15px 15px 0 15px;
      background-color: #fff;
      margin-top: 0;
    }
    .van-card__thumb {
      width: auto;
      height: auto;
      margin-right: 12px;
    }
    .van-card__content {
      min-height: auto;
      padding-bottom: 15px;
      border-bottom: 1px solid #F5F5F5;
    }
  }
</style>